<!--
 * @description  : 市管检查-投诉举报与建议组件
 * @descriptionDetail: 市管检查-投诉举报与建议组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view>
    <theme-navbar
      :is-white="false"
      title="投诉举报与建议"
      :customBack="handlerBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon" v-if="!isDisabled" @tap="handlerSure">
        确定
      </view>
    </theme-navbar>
    <u-empty margin-top="100" text="没有投诉举报与建议" mode="list" v-if="complains.length == 0"></u-empty>
    <view style="padding: 10px;border-bottom: 1px solid #ececec;" v-for="(item, idx) in complains" :key="idx">
      <u-row gutter="16">
        <u-col span="10">
          <u-row>
            <u-col span="12" class="title">
              {{ item.complainTypeName }}
            </u-col>
            <u-col span="12" class="sub-title">
              {{ item.content }}
            </u-col>
          </u-row>
        </u-col>
        <u-col span="2" style="text-align:center;display:flex;">
          <u-icon
            name="edit-pen"
            color="#2979ff"
            size="32"
            style="flex: 1;"
            v-if="!isDisabled"
            @tap="handlerAdd(item)"
          ></u-icon>
          <u-icon
            name="trash"
            color="red"
            size="32"
            style="flex: 1;" 
            v-if="!isDisabled"
            @tap="handlerDel(item)"
          ></u-icon>
        </u-col>
      </u-row>
    </view>
    <view class="bottom-btns">
      <u-button style="width: 100%;" type="primary" size="medium" v-if="!isDisabled" @click="handlerAdd()">
        新增
      </u-button>
    </view>
    <u-popup mode="bottom" height="80%" border-radius="16" v-model="addComplainOpen">
      <theme-navbar
        :is-white="false"
        title="投诉举报"
        :customBack="() => addComplainOpen=false"
        style="z-index: 99999"
      >
        <view class="nav-right-icon" @tap="handlerAddComp">
          确定
        </view>
      </theme-navbar>
      <u-cell-item title="类型" class="cell">
        <u-input
          input-align="right"
          :disabled="true"
          placeholder="请选择"
          slot="right-icon" 
					:custom-style="pointerStyle"
          v-model="complainItem['complainTypeName']"
          @tap="() => !isDisabled && (complainTypeShow=true)"
        />
      </u-cell-item>
      <u-field
        type="textarea"
        placeholder="请输入"
        label="备注"
        label-width="80"
        style="height: 300px;"
        :disabled="isDisabled"
        v-model="complainItem['content']"
      ></u-field>
      <u-select
        :list="complainTypeDicts"
        :mask-close-able="false"
        v-model="complainTypeShow" 
        @cancel="handlerCpSelect"
        @confirm="handlerCpConfirm"
      ></u-select>
    </u-popup>
  </view>
</template>
<script>
export default {
  name: "ComplainCom",
  props: {
    menuData: {
      type: Object,
      default: () => {},
    },
    isDisabled: {   // 是否可编辑
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      complains: this.menuData.complains || [],
      addComplainOpen: false,
      complainItem: {
        complainType: '',
        complainTypeName: '',
        content: '',
      },
      complainTypeDicts: this.$store.state.dicts['APCD_CHECK_COMPLAINTYPE'],
      complainTypeShow: false,
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
			pointerStyle: {
			  marginRight: "5px",
				pointerEvents: "none !important"
			},
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
    }
  },
  watch: {
    menuData(v) {
      console.log("监听", v);
    },
  },
  created () {
    console.log("数据", this.menuData);
  },
  methods: {
    // 添加
    handlerAdd(item) {
      item && (this.complainItem = item);
      this.addComplainOpen = true;
    },
    // 删除
    handlerDel(item) {
      this.$modal.confirm(`确定删除【${item.complainTypeName}】吗？`, () => {
        this.complains = this.complains.filter(c => c.uuid != this.complainItem.uuid);
      });
    },
    // 保存添加的投诉举报
    handlerAddComp() {
      if (this.complainItem.uuid) {
        this.complains = this.complains.filter(c => c.uuid != this.complainItem.uuid);
      } else {
        this.complainItem.uuid = new Date().getTime();
      }
      this.complains.push(this.$u.deepClone(this.complainItem));
      this.addComplainOpen = false;
    },
    // 关闭弹窗
    handlerCpSelect() {
      this.complainTypeShow = false;
    },
    // 类型选择
    handlerCpConfirm(e) {
      this.complainItem.complainType = e[0].value;
      this.complainItem.complainTypeName = e[0].label;
      this.complainTypeShow = false;
    },
    // 确定
    handlerSure() {
      this.$emit("ok", {records: [], complains: this.complains, comType: this.menuData.type,});
    },
    // 关闭
    handlerBack() {
      this.$emit("close", true);
    },
  },
}
</script>
<style lang="scss" scoped>
@import "@/style/common/rightMenu.scss";
.title {
  font-size: 15px;
  color: #666;
  font-weight: 600;
  margin: 5px 10px;
}
.sub-title {
  color: #666;
  margin: 3px 10px;
}
</style>